<template>
	<view class="container">
		<view class="title">气象证明申请</view>
		<up-steps :current="showNum" class="progressBar" activeColor="rgb(51,127,250)" inactiveColor="#C1C1C1">
			<up-steps-item title="申报信息"></up-steps-item>
			<up-steps-item title="申请人信息"></up-steps-item>
			<up-steps-item title="上传证件"></up-steps-item>
			<up-steps-item title="申报内容"></up-steps-item>
			<up-steps-item title="申报结果"></up-steps-item>
		</up-steps>
		<view class="content1" v-if="showNum==0">
			<span class="title">填写申报信息</span>
			<view class="menu">
				<up-form labelPosition="left" :model="formData" ref="formRef">
				    <!-- 1. 申报地区 -->				
					<up-form-item label="申报地区" prop="region" borderBottom labelWidth="150rpx" labelAlign="center" @click="showPicker('region')" required>
					  <up-input v-model="formData.region" disabled disabledColor="#ffffff" placeholder="请选择地区" border="bottom" :customStyle="{ pointerEvents: 'none' }" ></up-input>
					  <template #right>
						<up-icon name="arrow-right" class="arrow"></up-icon>
					  </template>
					</up-form-item>
				    								
					<!-- 2. 上报单位 -->
					<up-form-item label="上报单位" prop="department" borderBottom labelWidth="150rpx" labelAlign="center" required>
					  <up-input 
					      v-model="formData.department" 
					      disabled 
					      disabledColor="#ffffff" 
					      placeholder="气象科技服务中心" 
					      border="bottom"
					    ></up-input>
					  <template #right>
					    <up-icon name="arrow-right" class="arrow"></up-icon>
					  </template>
					</up-form-item>
						
				    <!-- 3. 申报事由 -->				
					<up-form-item label="申报事由" prop="applyReason" borderBottom labelWidth="150rpx" labelAlign="center" required>
					  <up-input v-model="formData.applyReason" placeholder="请输入申报事由" border="bottom"></up-input>
					  <template #right>
					    <up-icon name="arrow-right" class="arrow"></up-icon>
					  </template>
					</up-form-item>
					
					<!-- 4. 申请用途 -->
					<up-form-item label="申请用途" prop="applyPurpose" borderBottom labelWidth="150rpx" labelAlign="center" required>
					  <up-radio-group 
					      v-model="formData.applyPurpose"
					      placement="row">
					  	<up-radio
						  v-for="(item, index) in applyPurposeList"
						  :key="index"
						  :label="item.name"
						  :name="item.name"
						  @change="applyPurposeChange"
						>
						</up-radio>
					  </up-radio-group>
					</up-form-item>
					<up-input v-if="showApplyPurposeDiy" v-model="applyPurposeDiy" placeholder="请填写详细的申请用途" border="bottom"></up-input>
				  </up-form>
				  
				  <!-- 通用选择器 -->
				  <up-action-sheet
				    :show="showPickerVisible"
				    :actions="currentOptions"
				    :title="'请选择' + currentLabel"
				    @close="showPickerVisible = false"
				    @select="handleSelect"
				  ></up-action-sheet>
			</view>
			<view class="button">
				<up-button class="unitApplication" type="primary" :plain="true" text="单位申请" @click="gotoUnit"></up-button>
				<up-button class="unitApplication" type="primary" :plain="true" text="进度查询" @click="gotoHistory"></up-button>
				<up-button class="next" type="primary" text="下一步" @click="upStep"></up-button>
			</view>
		</view>
		<view class="content2" v-if="showNum==1">
			<span class="title">填写申请人信息</span>
			<view class="menu">
				<up-form labelPosition="left" :model="applyForm" :rules="applyRules" ref="applyFormRef">
				    <!-- 1. 申办人姓名（必填） -->
				    <up-form-item 
				      label="申办人姓名" 
				      prop="applyName" 
				      borderBottom 
				      labelWidth="180rpx" 
				      labelAlign="center"
				      required
				    >
				      <up-input 
				        v-model="applyForm.applyName" 
				        placeholder="请输入姓名" 
				        border="bottom"
				      ></up-input>
				    </up-form-item>
				    
				    <!-- 2. 身份证号（必填） -->
				    <up-form-item 
				      label="身份证号" 
				      prop="applyIdCard" 
				      borderBottom 
				      labelWidth="180rpx" 
				      labelAlign="center"
				      required
				    >
				      <up-input 
				        v-model="applyForm.applyIdCard" 
				        placeholder="请输入身份证号码" 
				        border="bottom"
				      ></up-input>
				    </up-form-item>
				  
				    <!-- 3. 手机号码（必填） -->
				    <up-form-item 
				      label="手机号码" 
				      prop="applyPhone" 
				      borderBottom 
				      labelWidth="180rpx" 
				      labelAlign="center"
				      required
				    >
				      <up-input 
				        v-model="applyForm.applyPhone" 
				        placeholder="请输入手机号码" 
				        border="bottom"
				        type="number"
				      ></up-input>
				    </up-form-item>
				  
				    <!-- 4. 通讯地址（选填） -->
				    <up-form-item 
				      label="通讯地址" 
				      prop="applyAddress" 
				      borderBottom 
				      labelWidth="180rpx" 
				      labelAlign="center"
				    >
				      <up-input 
				        v-model="applyForm.applyAddress" 
				        placeholder="请输入通讯地址" 
				        border="bottom"
				      ></up-input>
				    </up-form-item>
				  
				    <!-- 5. Email -->
				    <up-form-item 
				      label="Email" 
				      prop="applyEmail" 
				      borderBottom 
				      labelWidth="180rpx" 
				      labelAlign="center"
				    >
				      <up-input 
				        v-model="applyForm.applyEmail" 
				        placeholder="请输入电子邮箱" 
				        border="bottom"
				      ></up-input>
				    </up-form-item>
				  </up-form>
			</view>
			<view class="button">
				<up-button class="past" type="primary" :plain="true" text="上一步" @click="downStep"></up-button>
				<up-button class="next" type="primary" text="下一步" @click="upStep"></up-button>
			</view>
		</view>
		<view class="content3" v-if="showNum==2">
			<view class="upload1" @click="upload(1)">
				<image v-if="!idCardFrontUrl" src="/static/upload.png" mode="widthFix" 
					style="width: 136rpx;height: 136rpx;"></image>
				<image v-else :src="idCardFrontUrl" style="width: 90%;height: 100%;"></image>
				<text v-if="!idCardFrontUrl" class="upload-text">请上传身份证人像面</text>
				<view v-if="!idCardFrontUrl" class="required">*</view>
			</view>
			<view class="upload2" @click="upload(2)">
				<image v-if="!idCardBackUrl" src="/static/upload.png" mode="widthFix" 
					style="width: 136rpx;height: 136rpx;"></image>
				<image v-else :src="idCardBackUrl" style="width: 90%;height: 100%;"></image>
				<text v-if="!idCardBackUrl" class="upload-text">请上传身份证国徽面</text>
				<view v-if="!idCardBackUrl" class="required">*</view>
			</view>
			<view class="button">
				<up-button class="past" type="primary" :plain="true" text="上一步" @click="downStep"></up-button>
				<up-button class="next" type="primary" text="下一步" @click="upStep"></up-button>
			</view>
		</view>
		<view class="content4" v-if="showNum==3">
			<!-- <view class="line"></view> -->
			<span class="title">填写申请内容</span>
			<view class="category">
				<view class="text">灾害类别</view>
				<view class="icon">*</view>
			</view>
			<view class="options">
			    <view 
			      v-for="(option, index) in options" 
			      :key="index"
			      class="option"
			      :class="{ active: currentIndex === index }"
			      @click="selectOption(index)"
			    >
			      {{ option }}
			    </view>
			</view>
			<view class="times">
				<view class="disasterArea">
					<view class="required">
						*
					</view>
					<view class="title">
						受灾区域
					</view>
					<view class="option">
						<up-input
						    border="bottom"
							v-model="disasterArea"
						    clearable
						></up-input>
					</view>
				</view>
				<view class="startTime">
					<view class="required">
						*
					</view>
					<view class="title">
						开始时间
					</view>
					<view class="option">
						<up-calendar
						  style="border: none; border-bottom: 1px solid #ddd;"
						  :show="showDisasterStartTime" 
						  @confirm="confirmStartTime" 
						  :mode="modeDate" 
						  monthNum="24" 
						  :closeOnClickOverlay="true"
						  @close="stCancel"
						  :minDate="minDate"
						  :maxDate="maxDate">
						</up-calendar>
						<up-button 
						  style="border: none; border-bottom: 1px solid #ddd;"
						  @click="showDisasterStartTime = true">
						  {{clickStartTime}}
						</up-button>
					</view>
				</view>
				<view class="endTime">
					<view class="required">
						*
					</view>
					<view class="title">
						结束时间
					</view>
					<view class="option">
						<up-calendar
						  style="border: none; border-bottom: 1px solid #ddd;"
						  :show="showDisasterEndTime" 
						  @confirm="confirmEndTime" 
						  :mode="modeDate" 
						  monthNum="24" 
						  :closeOnClickOverlay="true"
						  @close="edCancel"
						  :minDate="minDate"
						  :maxDate="maxDate">
						</up-calendar>
						<up-button 
						  style="border: none; border-bottom: 1px solid #ddd;"
						  @click="showDisasterEndTime = true">
						  {{clickEndTime}}
						</up-button>
					</view>
				</view>
			</view>
			<view class="photoTitle">
				<span class="title1">照片上传</span>
				<span class="title2">(最多5张，大小不能超过10MB)</span>
			</view>
			<up-upload
			  class="photoUploadArea"
			  :fileList="fileList3"
			  @afterRead="afterRead3"
			  @delete="deletePic3"
			  name="disasterProof"
			  multiple
			  :maxCount="5"
			  maxSize="10485760"
			  width="120rpx"
			  height="120rpx"
			>
			</up-upload>			
			<view class="desTitle">
				描述
			</view>	
			<up-textarea class="desText" v-model="desValue" placeholder="请输入受灾对象详细地址及简单描述(如农田被淹、车辆受损等，字数控制在100字以内)" border="bottom"></up-textarea>
			<view class="button">
				<up-button class="past" type="primary" :plain="true" text="上一步" @click="downStep"></up-button>
				<up-button class="next" type="primary" text="提交" @click="submitApply"></up-button>
			</view>
		</view>
		<view class="content5" v-if="showNum==4">
			<view class="photo"></view>
			<view class="state">
				您的申请已提交成功，经相关单位审核后，将于5个工作日内进行回复。
			</view>
			<view class="info">
				<view class="reportingUnit">
					<view class="title">
						上报单位
					</view>
					<view class="option">
						{{formData['department']}}
					</view>
				</view>
				<view class="name">
					<view class="title">
						申报人姓名
					</view>
					<view class="option">
						{{applyForm.applyName}}
					</view>
				</view>
				<view class="telephone">
					<view class="title">
						手机号
					</view>
					<view class="option">
						{{applyForm.applyPhone}}
					</view>
				</view>
			</view>
			<view class="button">
				<up-button class="past" type="primary" :plain="true" text="重新申请" @click="reApply"></up-button>
				<!-- <up-button class="next" type="primary" text="进度查询" @click="checkProgress"></up-button> -->
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, toRefs } from 'vue';
// 打开单位申请模块
const gotoUnit = ()=>{
	uni.navigateTo({
	  url: '/pages/applicationUnit/applicationUnit'
	});
}
// 历史申请进度查询模块
const gotoHistory = ()=>{
	uni.navigateTo({
	  url: '/pages/applicationHistory/applicationHistory'
	});
}
// 控制显示图层
const showNum = ref(0)
// 第一步表单数据
const formData = ref({
  region: '',
  department: '气象科技服务中心',
  applyReason: '',
  applyPurpose: '',
})

const { region, department, applyReason, applyPurpose } = toRefs(formData.value);

// 选择器控制
const showPickerVisible = ref(false)
const currentLabel = ref('')
const currentField = ref('')
const currentOptions = ref([])

// 各字段选项
const pickerOptions = {
  region: ['浉河区','平桥区','羊山新区','潢川县','光山县','息县','新县','罗山县','商城县','淮滨县','固始县'],
  department: ['气象科技服务中心'],
}

// 显示选择器
const showPicker = (field) => {
  currentField.value = field
  currentLabel.value = {
    region: '地区',
    department: '单位',
  }[field]
  currentOptions.value = pickerOptions[field].map(item => ({ name: item }))
  showPickerVisible.value = true
}

// 选择确认
const handleSelect = (e) => {
  formData.value[currentField.value] = e.name
  showPickerVisible.value = false
}

// 表单引用
const formRef = ref(null)

// 申请用途数据
const applyPurposeList = reactive([
  {
    name: '保险理赔',
    disabled: false,
  },
  {
    name: '事故调查',
    disabled: false,
  },
  {
    name: '诉讼需要',
    disabled: false,
  },
  {
    name: '科学研究',
    disabled: false,
  },
  {
    name: '其他',
    disabled: false,
  },
]);

// 是否展示申请用途-其他
const showApplyPurposeDiy = ref(false)
// 申请用途-其他
const applyPurposeDiy = ref('')

const applyPurposeChange = (n) => {
  formData.applyPurpose = n
  //把选择的申请用途赋值给applyPurpose
  if(n!=='其他'){
	  showApplyPurposeDiy.value = false
	  console.log('选中的值', formData.applyPurpose);
  }else{
	  showApplyPurposeDiy.value = true
	  applyPurposeDiy.value = ''
	  console.log('选中的值', formData.applyPurpose);
  }
};

// 判断并返回对应的值
const getApplyPurposeValue = () => {
  // 检查applyPurpose是否为'其他'（不区分大小写的判断）
  if (formData.applyPurpose === '其他') {
    return applyPurposeDiy.value
  } else {
    return formData.applyPurpose
  }
}

// 验证函数
const validateApplyPurpose = () => {
  // 当选择了'其他'时
  if (formData.applyPurpose === '其他') {
    // 检查自定义输入是否为空（去除首尾空格）
    return applyPurposeDiy.value.trim() !== '';
  } else {
    // 未选择'其他'时，检查applyPurpose是否有效
    const value = formData.applyPurpose;
    // 不为空、不是undefined、不是null时返回true
    return value !== '' && value !== undefined && value !== null;
  }
};

//第二步表单数据
// 表单数据
const applyForm = ref({
  applyName: '',
  applyIdCard: '',
  applyPhone: '',
  applyAddress: '',
  applyEmail: ''
})

const { applyName, applyIdCard, applyPhone, applyAddress, applyEmail } = toRefs(applyForm.value)

// 验证规则
const applyRules = {
  applyName: [
    { required: true, message: '请输入姓名', trigger: ['blur', 'change'] },
    { min: 2, max: 10, message: '姓名长度为2-10个字符', trigger: ['blur', 'change'] }
  ],
  applyIdCard: [
    { required: true, message: '请输入身份证号码', trigger: ['blur', 'change'] },
    { 
      validator: (rule, value, callback) => {
        if (!/^\d{17}[\dXx]$/.test(value)) {
          callback(new Error('请输入正确的身份证号码'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    }
  ],
  applyPhone: [
    { required: true, message: '请输入手机号码', trigger: ['blur', 'change'] },
    { 
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号码',
      trigger: ['blur', 'change']
    }
  ],
  applyEmail: [
    { 
      type: 'email',
      message: '请输入正确的邮箱格式',
      trigger: ['blur', 'change']
    }
  ]
}

// 表单引用
const applyFormRef = ref(null)

//第三步表单
const fileList1 = ref([]);

// 删除图片
const deletePic1 = (event) => {
  fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead1 = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList1.value.length;
  lists.map((item) => {
    fileList1.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise1(lists[i].url);
    let item = fileList1.value[fileListLen];
    fileList1.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
};

const fileList2 = ref([]);

// 删除图片
const deletePic2 = (event) => {
  fileList2.value.splice(event.index, 1);
};

// 新增图片
const afterRead2 = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList2.value.length;
  lists.map((item) => {
    fileList2.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise2(lists[i].url);
    let item = fileList2.value[fileListLen];
    fileList2.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
};

const uploadFilePromise1 = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://218.28.7.243:32201/api/files/upload',
      filePath: url,
      name: 'file',
      formData: {
        user: 'test',
      },
      success: (res) => {
		console.log('JSON.parse(res.data).data',JSON.parse(res.data).data)
		idCardFrontUrl.value = JSON.parse(res.data).data
      },
    });
  });
};

const uploadFilePromise2 = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://218.28.7.243:32201/api/files/upload',
      filePath: url,
      name: 'file',
      formData: {
        user: 'test',
      },
      success: (res) => {
		idCardBackUrl.value = JSON.parse(res.data).data
      },
    });
  });
};

//身份证正面图片地址
const idCardFrontUrl = ref(null)
//身份证反面图片地址
const idCardBackUrl = ref(null)

// 上传身份证
const upload = (type) => {
	uni.chooseImage({
		success: (chooseImageRes) => {
			const tempFilePaths = chooseImageRes.tempFilePaths;
			uni.showLoading({
				title: '上传中...'
			})
			uni.uploadFile({
				url: 'http://218.28.7.243:32201/api/files/upload',
				filePath: tempFilePaths[0],
				name: 'file',
				success: (res) => {
					console.log('res',res)
					uni.hideLoading();
					var obj = JSON.parse(res.data);
					console.log('obj',obj)
					if (obj.code == 200) {
						if (type == 1) { //身份证人像面
							idCardFrontUrl.value = obj.data;
						} else if (type == 2) {  //身份证国徽面
							idCardBackUrl.value = obj.data;
						}
					} else {
						uni.showToast({
							title: obj.msg,
							icon: 'none',
							duration: 500
						})
					}
				},
				complete() {
					uni.hideLoading();
				}
			});
		}
	});
}


//第四步表单
const options = ref([
  '暴雨', '暴雪', '大风', '大寒潮', '大雾', 
  '高温', '霜冻', '干旱', '雷电', '火险', 
  '地质灾害', '其他'
]);

const currentIndex = ref(-1); // 初始没有选中任何选项

const selectOption = (index) => {
  currentIndex.value = index;
};

const selectedOption = computed(() => {
  return currentIndex.value !== -1 
    ? options.value[currentIndex.value] 
    : null;
});

/////////////////////////////////////////////////////
//灾害区域
const showDisasterArea = ref(false)
const disasterAreas = reactive([
  ['平桥区','浉河区','羊山新区','潢川县','光山县','息县','新县','罗山县','商城县','淮滨县','固始县']
]);
//灾害地区结果
const disasterAreasResult = (e)=>{
	disasterArea.value = e.value[0]
	showDisasterArea.value=false
}
const closeDisasterAreasResult = ()=>{
	showDisasterArea.value=false
}
const disasterArea = ref('')
//开始时间
const showDisasterStartTime = ref(false)
//结束时间
const showDisasterEndTime = ref(false)

//开始时间点击回调函数
const confirmStartTime = (e)=>{
	console.log(e)
	clickStartTime.value=e[0]
	showDisasterStartTime.value=false
}
//结束时间点击回调函数
const confirmEndTime = (e)=>{
	clickEndTime.value=e[0]
	showDisasterEndTime.value=false
}
//选择开始时间
const clickStartTime = ref('')
//选择结束时间
const clickEndTime = ref('')

const stCancel =()=>{
	showDisasterStartTime.value=false
}

const edCancel =()=>{
	showDisasterEndTime.value=false
}

const modeDate = ref('single')

// 当前日期
const today = new Date();

// 最小日期（过去1年，格式化为 'YYYY-MM-DD'）
const minDate = computed(() => {
  const pastYear = new Date(today);
  pastYear.setFullYear(pastYear.getFullYear() - 1);
  return pastYear.toISOString().split('T')[0];
});

// 最大日期（未来1年，格式化为 'YYYY-MM-DD'）
const maxDate = computed(() => {
  const futureYear = new Date(today);
  futureYear.setFullYear(futureYear.getFullYear() + 1);
  return futureYear.toISOString().split('T')[0];
});


/////////////////////////////////////////////////////
// 灾害证明照片列表
const fileList3 = ref([]);
//保存灾害图片url
const disasterPicUrl = ref([])
// 照片上传处理
const afterRead3 = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList3.value.length;
  lists.map((item) => {
    fileList3.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise3(lists[i].url);
    let item = fileList3.value[fileListLen];
    fileList3.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
    });
    fileListLen++;
  }
};

// 照片删除处理
const deletePic3 = (event) => {
  fileList3.value.splice(event.index, 1);
  //删除转换后的url
  disasterPicUrl.value.splice(event.index, 1)
};

// 上传服务函数
const uploadFilePromise3 = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: 'http://218.28.7.243:32201/api/files/multipleUpload', 
      filePath: url,
      name: 'files',
      success: (res) => {
		// disasterPicUrl.value += JSON.parse(res.data).data[0]
		disasterPicUrl.value.push(JSON.parse(res.data).data[0])
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};

//描述框内容
const desValue = ref('');  
//下一步函数
const upStep = ()=>{
	showNum.value++
	console.log(showNum.value)
}
//上一步函数
const downStep = ()=>{
	showNum.value--
	console.log(showNum.value)
}
//时间格式转化函数
const formatDateMethod=(dateString) => {
  const date = new Date(dateString);
  
  // 补零函数
  const padZero = (num) => num.toString().padStart(2, '0');
  
  return `${date.getFullYear()}-${
    padZero(date.getMonth() + 1)}-${
    padZero(date.getDate())} ${
    padZero(date.getHours())}:${
    padZero(date.getMinutes())}:${
    padZero(date.getSeconds())}`;
}
//提交申请函数
const submitApply= async ()=>{
	//判断用户信息是否填写完整
	let isComplete = validateApplyPurpose()&&applyName.value&&applyReason.value&&department.value&&disasterArea.value&&formatDateMethod(clickEndTime.value)&&formatDateMethod(clickStartTime.value)&&selectedOption.value&&applyIdCard.value&&idCardBackUrl.value&&idCardFrontUrl.value&&applyPhone.value&&region.value&&applyPhone.value
	if(!isComplete){
		uni.showToast({
		  title: '信息填写不完整', // 提示内容
		  icon: 'none', // 图标，可选值: success, loading, none
		  duration: 3000, // 显示时长(ms)，默认1500
		  position: 'center' // 位置，可选值: top, center, bottom
		});
		return
	}
	//提交申请
	await uni.request({
	  url: 'http://218.28.7.243:32201/api/wcertificate/apply', // 请求URL
	  method: 'POST',
	  header: {
	    'Access-Control-Allow-Origin': '*',
	  },
	  data:{
		  address:applyAddress.value, //通讯地址
		  applicantName:applyName.value, //申请人姓名
		  auditDesc:'',  //审核描述
		  auditStatus:0, //审核状态 0-待审核、1-通过、2-驳回
		  declareTarget:applyReason.value, //申报事由
		  deptName:department.value, // 上报单位
		  disasterArea:disasterArea.value, //受灾区域
		  disasterDesc:desValue.value, //	灾害描述
		  disasterEndTime: formatDateMethod(clickEndTime.value), //灾害结束时间,yyyy-MM-dd HH:mm:ss
		  disasterPicUrl: disasterPicUrl.value.join(','), //灾害图片URL,多个以逗号分割
		  disasterStartTime: formatDateMethod(clickStartTime.value), //灾害开始时间,yyyy-MM-dd HH:mm:ss
		  disasterType:selectedOption.value, //灾害类别
		  email:applyEmail.value, //电子邮箱
		  idCard: applyIdCard.value, //身份证号
		  idCardBackUrl:idCardBackUrl.value, //身份证国徽面URL
		  idCardFrontUrl: idCardFrontUrl.value, //身份证人像面URL
		  phoneNum:applyPhone.value,//手机号
		  regionArea: region.value, //申报地区
		  appPurpose:getApplyPurposeValue(), //申请用途
		  wxId: applyPhone.value,//用户id（手机号）
	  },
	  success: (res) => {
		showNum.value++
		console.log('success',res)
	  },
	  fail: (err) => {
	    console.error('请求失败:', err);
		uni.showToast({
		  title: '提交失败，请重新提交或联系气象科技服务中心', // 提示内容
		  icon: 'none', // 图标，可选值: success, loading, none
		  duration: 2000, // 显示时长(ms)，默认1500
		  position: 'center' // 位置，可选值: top, center, bottom
		});
	  },
	  complete: () => {
	    console.log('请求完成');
	  }
	});	
}
//重新申请
const reApply = ()=>{
	showNum.value=0
}
//进度查询
const checkProgress= ()=>{
	
	uni.showToast({
	  title: '待审核', // 提示内容
	  icon: 'success', // 图标，可选值: success, loading, none
	  duration: 2000, // 显示时长(ms)，默认1500
	  position: 'center' // 位置，可选值: top, center, bottom
	});
	
}


</script>


<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  position: relative;
  background-image: url('/static/background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: PingFangSC, PingFang SC;
  /* 主标题 */
  > .title {
    position: relative;
	box-sizing: border-box;
	padding: 80rpx 40rpx;
    width: 100%;
    height: 36rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #181818;
    line-height: 36rpx;
  }
  /* 进度条 */
  .progressBar {
    position: relative;
	box-sizing: border-box;
	padding-top: 50rpx;
	padding-bottom: 150rpx;
    width: 100%;
    height: 83.4rpx;
  }
  /* 通用内容区域 */
  [class^="content"] {
	position: relative;
    width: 100%;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
    box-sizing: border-box;
    /* 标题带蓝线 */
    > .title {
      position: relative;
      width: auto;
      height: auto;
      margin: 0 0 30rpx 0;
      padding-left: 22rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #181818;
      line-height: normal;
      
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 28rpx;
        background: #468BFB;
        border-radius: 0 4rpx 4rpx 0;
      }
    }
    /* 按钮组 */
    .button {
      // position: absolute;
	  position: relative;
      display: flex;
      gap: 24rpx;

      .past, .unitApplication {
        width: 238rpx;
        height: 80rpx;
        border-radius: 16rpx;
        font-weight: 400;
        font-size: 32rpx;
        color: #337FFA;
        background: #FFFFFF;
        border: 1rpx solid #337FFA;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .next {
        width: 424rpx;
        height: 80rpx;
        border-radius: 16rpx;
        font-weight: 400;
        font-size: 32rpx;
        color: #FFFFFF;
        background: linear-gradient(180deg, #6FA4FD 0%, #468BFA 100%);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  /* 内容1：申报信息 */
  .content1 {
    .menu {
	  position: relative;
	  box-sizing: border-box;
      padding: 30rpx 20rpx;
      width: 100%;
    }

    .button {
	  position: relative;
	  box-sizing: border-box;
	  padding: 30rpx 10rpx;
      width: 100%;
    }
  }

  /* 内容2：申请人信息 */
  .content2 {
    .menu {
	  position: relative;
	  box-sizing: border-box;
	  padding: 30rpx 20rpx;
	  width: 100%;
    }

    .button {
      position: relative;
      box-sizing: border-box;
      padding: 30rpx 10rpx;
      width: 100%;
    }
  }

  /* 内容3：上传证件 */
  .content3 {
    .upload1 {
	  position: relative;
      width: 100%;
      height: 316rpx;
      border: 3rpx dashed #337FFA;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
	  margin: 20rpx 0;
	  .required{
		font-weight: 400;
		font-size: 40rpx;
		font-weight: 800;
		color: #F95957;
		margin-top: 20rpx;
	  }
    }

    .upload2 {
      position: relative;
      width: 100%;
      height: 316rpx;
      border: 3rpx dashed #337FFA;
      border-radius: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
	  margin: 20rpx 0;
	  .required{
		font-weight: 400;
		font-size: 40rpx;
		font-weight: 800;
		color: #F95957;
		margin-top: 20rpx;
	  }
    }
	
    .upload-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .upload-text {
        font-weight: 400;
        font-size: 26rpx;
        color: #337FFA;
        margin-top: 20rpx;
      }
    }

    .button {
      position: relative;
      box-sizing: border-box;
      padding: 60rpx 10rpx;
      width: 100%;
    }
  }

  /* 内容4：申报内容 */
  .content4 {
    .category {
	  position: relative;
	  width: 100%;
      display: flex;
      align-items: center;
      margin: 20rpx 0 20rpx;

      .text {
        font-weight: 400;
        font-size: 28rpx;
        color: #6E6D72;
      }

      .icon {
        font-weight: 500;
        font-size: 32rpx;
        color: #F95957;
        margin-left: 5rpx;
      }
    }

    .options {
		position: relative;
		width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4列 */
        grid-template-rows: repeat(3, 68rpx); /* 3行 */
        gap: 20rpx;
        margin: 20rpx 0;
    
        .option {
          width: 100%;
          height: 68rpx;
          background: #F7F8FA;
          border-radius: 16rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 26rpx;
          color: #1B2240;
    
          &.active {
            background: rgba(70,139,251,0.08);
            color: #468BFB;
            border: 1rpx solid #468BFB;
          }
        }
    }
	
	.times {
	  width: 100%;
	  margin: 20rpx 0;
	  display: flex;
	  flex-direction: column;
	  .disasterArea{
		  flex: 1;
		  display: flex;
		  .required{
			  flex: 0.02;
			  line-height: 92rpx;
			  text-align: center;
			  font-weight: 400;
			  color: #F95957;
		  }
		  .title{
			  flex: 1;
			  line-height: 92rpx;
			  text-align: center;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  color: #6E6D72;
			  text-align: center;
			  font-style: normal;
		  }
		  .option{
			  flex: 4;
		  }
	  }
	  .startTime{
		  flex: 1;
		  display: flex;
		  .required{
			  flex: 0.02;
			  line-height: 92rpx;
			  text-align: center;
			  font-weight: 400;
			  color: #F95957;
		  }
		  .title{
			  flex: 1;
			  line-height: 92rpx;
			  text-align: center;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  color: #6E6D72;
			  text-align: center;
			  font-style: normal;
		  }
		  .option{
		  	  flex: 4;
		  }
	  }
	  .endTime{
		  flex: 1;
		  display: flex;
		  .required{
			  flex: 0.02;
			  line-height: 92rpx;
			  text-align: center;
			  font-weight: 400;
			  color: #F95957;
		  }
		  .title{
			  flex: 1;
			  line-height: 92rpx;
			  text-align: center;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  color: #6E6D72;
			  text-align: center;
			  font-style: normal;
		  }
		  .option{
		  	  flex: 4;
		  }
	  }
	}
    
	.photoTitle {
	  display: flex;
	  align-items: center;
	  margin: 30rpx 0 30rpx 0;
	
	  .title1 {
	    font-size: 28rpx;
	    color: #6E6D72;
	    font-weight: 500;
	  }
	
	  .title2 {
		margin-left: auto;
	    font-size: 24rpx;
	    color: #B0B3BF;
	  }
	}
	
	.photoUploadArea{
		position: relative;
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
	}
	
    .desTitle {
	  position: relative;
	  width: 100%;
      font-weight: 400;
      font-size: 28rpx;
      color: #6E6D72;
      margin-bottom: 20rpx;
    }

    .desText {
      width: 100%;
      height: 150rpx;
      margin-bottom: 30rpx;
    }

    .button {
      position: relative;
      box-sizing: border-box;
      padding: 30rpx 10rpx;
      width: 100%;
    }
  }

  /* 内容5：申报结果 */
  .content5 {
	position: relative;
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .photo {
      width: 220rpx;
      height: 220rpx;
      margin: 92rpx 0 60rpx;
      background: url('/static/shenhe.png') no-repeat center/contain;
    }

    .state {
      width: 598rpx;
      // height: 126rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 42rpx;
      text-align: center;
      margin-bottom: 60rpx;
    }

    .info {
	  position: relative;
      width: 100%;
      // height: 276rpx;
      margin-bottom: 40rpx;
	  display: flex;
	  flex-direction: column;
	  .reportingUnit{
		  flex: 1;
		  display: flex;
		  border-bottom: #CCCCCC 1rpx solid;
		  .title{
			  margin-left: 15rpx;
			  flex: 1;
			  line-height: 92rpx;
			  text-align: left;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  color: #6E6D72;
			  font-style: normal;
		  }
		  .option{
			  flex: 3;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  line-height: 92rpx;
			  color: #03050D;
			  text-align: center;
			  font-style: normal;
		  }
	  }
	  .name{
		  flex: 1;
		  display: flex;
		  border-bottom: #CCCCCC 1rpx solid;
		  .title{
			  margin-left: 15rpx;
			  flex: 1;
			  line-height: 92rpx;
			  text-align: left;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  color: #6E6D72;
			  font-style: normal;
		  }
		  .option{
			  flex: 3;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  line-height: 92rpx;
			  color: #03050D;
			  text-align: center;
			  font-style: normal;
		  }
	  }
	  .telephone{
		  flex: 1;
		  display: flex;
		  border-bottom: #CCCCCC 1rpx solid;
		  .title{
			  margin-left: 15rpx;
			  flex: 1;
			  line-height: 92rpx;
			  text-align: left;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  color: #6E6D72;
			  font-style: normal;
		  }
		  .option{
			  flex: 3;
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 400;
			  line-height: 92rpx;
			  color: #03050D;
			  text-align: center;
			  font-style: normal;
		  }
	  }
    }

    .button {
      position: relative;
	  width: 100%;
      box-sizing: border-box;
      padding: 30rpx 10rpx;
	  .past{
		  width: 70%;
	  }
    }
  }
}


</style>